<template>
  <div class="J-toast" v-if="show">
    <div class="content" v-if="options.msg">
      {{ options.content }}
    </div>
    <div class="weui-mask_transparent" v-if="options.toast"></div>
    <div class="weui-toast" v-if="options.toast">
      <i class="weui-icon_toast" :class="options.loading?'weui-loading':'weui-icon-success-no-circle'"></i>
      <p class="weui-toast__content">{{ options.loading ? '数据加载中': '已完成' }}</p>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'toast',
    data () {
      return {
        timers: []
      }
    },
    computed: {
      ...mapState({
        show: state => state.toast.show,
        options: state => state.toast.options
      })
    },
    methods: {
      ...mapActions({
        toastHide: 'TOAST_HIDE'
      }),
      countdown () {
        var _this = this
        if (this.options.autoClose || this.options.content) {
          const t = setTimeout(() => {
            _this.toastHide()
          }, this.options.showTime || 2000)
          this.timers.push(t)
        }
      }
    },
    watch: {
      options () {
        this.timers.forEach((timer) => {
          window.clearTimeout(timer)
        })
        this.timers = []
        this.countdown()
      }
    }
  }
</script>
<style lang="scss">
  @-webkit-keyframes bounceIn {
    0% {
      /*opacity: 0;*/
      -webkit-transform: scale(.5);
      transform: scale(.5)
    }

    100% {
      /*opacity: 1;*/
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }

  @keyframes bounceIn {
    0% {
      /*opacity: 0;*/
      -webkit-transform: scale(.5);
      -ms-transform: scale(.5);
      transform: scale(.5)
    }

    100% {
      /*opacity: 1;*/
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1)
    }
  }
  .J-toast{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-duration: .3s;
      animation-duration: .3s;
      font-size:14px;
      padding:8px 15px;
      border-radius:4px;
      -webkit-border-radius: 4px;
      background-color:rgba(0,0,0,0.6);
      color:#fff;
    }
  }
</style>
